<template>
 
  <el-row class="home" :gutter="20"> 
        <el-col :span="8" style="margin-top:20px">
            <el-card shadow="hover">
                <div class="user">
                    <img :src="getImageUrl(`user`)" class="user"/>
                    <div class="user-info">
                        <p class="user-info-admin">Admin</p>
                        <p class="user-info-p">超级管理员:<span style="color:red">热热</span></p>
                    </div>
                </div>
                <div class="login-info">
                    <p>上次登录时间:<span>2024-08-05</span></p>
                    <p>上次登录地点:<span>广东省东莞市</span></p>
                </div>
            </el-card>

            <el-card shadow="hover" class="user-table">
               <el-table :data="tableData">
                    <el-table-column
                    v-for="(val,key) in tableLabel"
                    :key="key"
                    :prop="key"
                    :label="val"
                    >

                    </el-table-column>
               </el-table>
            </el-card>
        </el-col>
        <el-col :span="16" style="margin-top:20px">
            <div class="num">
                <el-card :body-style="{display:'flex',padding:0}"
                v-for="item in countData" 
                :key="item.name"
                >
                <component :is="item.icon" class="icons" :style="{background:item.color}"></component>
            <div class="detail">
                <p class="num">￥{{item.value}}</p>
                <p class="txt">￥{{item.name}}</p>
            </div>
            </el-card>
            </div>
            <el-card class="top-echart">
                    <div ref="echart" style="height:140px"></div>
            </el-card>

            <div class="graph">
                <el-card>
                    <div ref="userEchart" style="height:50%;" ></div>
                </el-card>
                <el-card>
                    <div ref="videoEchart" style="height:50%"></div>
                </el-card>
            </div>
        </el-col>
  </el-row>
</template>

<script setup>
//import axios  from "axios";
import * as echarts from 'echarts'
import { ref ,getCurrentInstance,onMounted,reactive} from "vue";
const {proxy}=getCurrentInstance()


const getImageUrl=()=>{
    return new URL(`../assets/images/user.jpg`,import.meta.url).href
}
const tableData = ref([
   
])
const countData=ref([


])
const chartData=ref([


])
//const observer=ref(null)
//这个是折线图和柱状图 两个图表共用的公共配置
const xOptions = reactive({
      // 图例文字颜色
      textStyle: {
        color: "#333",
      },
      legend: {},
      grid: {
        left: "20%",
      },
      // 提示框
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category", // 类目轴
        data: [],
        axisLine: {
          lineStyle: {
            color: "#17b3a3",
          },
        },
        axisLabel: {
          interval: 0,
          color: "#333",
        },
      },
      yAxis: [
        {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
        },
      ],
      color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
      series: [],
})

const pieOptions = reactive({
  tooltip: {
    trigger: "item",
  },
  legend: {},
  color: [
    "#0f78f4",
    "#dd536b",
    "#9462e5",
    "#a6a6a6",
    "#e1bb22",
    "#39c362",
    "#3ed1cf",
  ],
  series: []
})
const tableLabel = ref({
    name: "课程",
    todayBuy: "今日购买",
    monthBuy: "本月购买",
    totalBuy: "总购买",
})

const getTableData= async ()=>{
      const data=await proxy.$api.getTableData()
      tableData.value=data.tableData
      console.log(data);
}

const getCountData= async ()=>{
      const data=await proxy.$api.getCountData()
      countData.value=data
      console.log(data);
}
const getChartData= async ()=>{
      const {orderData,userData,videoData}=await proxy.$api.getChartData()
      //对第一个图标进行x轴和series赋值
      xOptions.xAxis.data=orderData.date
      xOptions.series=Object.keys(orderData.data[0]).map(val=>{
            return {
                name:val,
                data:orderData.data.map(item=>item[val]),
                type:'line'
            }
      })
      const oneEchart=echarts.init(proxy.$refs['echart'])
      oneEchart.setOption(xOptions)

      //对第二个表格进行渲染
      xOptions.xAxis.data=userData.map(item=>item.date)
      xOptions.series=[
        {
            name:'新增用户',
            data:userData.map(item=>item.new),
            type:'bar'
        },
        {
            name:'活跃用户',
            data:userData.map(item=>item.active),
            type:'bar'
        },

      ]
      const twoEchart=echarts.init(proxy.$refs['userEchart'])
      twoEchart.setOption(xOptions)
      //对饼状图进行渲染
      pieOptions.series=[
        {
            data:videoData,
            type:'pie'
        }
      ]
      const threeEchart=echarts.init(proxy.$refs['videoEchart'])
      threeEchart.setOption(pieOptions)

      //监听页面的变化
      /*observer.value=new ResizeObserver((u)=>{
        oneEchart.resize()
        twoEchart.resize()
        threeEchart.resize()
      })
      //容器存在
      if(proxy.$refs['echart']){
        observer.value.observe(proxy.$refs['echart'])
      } */
    }
onMounted(()=>{
    getTableData()
    getCountData()
    getChartData()
})
</script>

<style scoped lang="less">
.home{
    height: 100%;
    overflow: hidden;
    .user{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin-bottom:20px;
    img{
    width:160px;
    height: 160px;
    border-radius: 50%;
    margin-right:40px;
}
    .user-info{
        p{
            line-height: 40px;
        }
        .user-info-p{
            color:#999;
        }
        .user-info-admin{
            font-size: 35px;
        }
    }
}
    .login-info{
        p{
            line-height:30px;
            font-size:14px;
            color:#999;
            span{
                color: #666;
                margin-left:60px;
            }
        }
    }

    .user-table{
        margin-top: 22px;
    }
    .num{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 30%;
        .el-card{
            
            width: 33%;
            margin-bottom:8px;
        }
        .icons{
            width: 80px;
            height: 80px;
            font-size: 30px;
            color: #fff;
            line-height: 80px;
            text-align: center;
        }
        .detail{
            margin-left: 15px;
            display: flex;
            flex-direction:column;
            justify-content: center;
            //align-items: center;
        }
        .num{
            font-size: 28px;
            margin-bottom: 8px;
            
        }
        .txt{
            font-size: 15px;
            text-align: center;
            color: #999;

        }

    }
    .graph{
        margin-top:8px;
        display: flex;
        justify-content: space-between;
        
        .el-card{
            width: 48%;
            height: 200px;
            //overflow: auto;
        }
    }
}


</style>